/*全局对象*/
var gObj = {};

/*=====================================轮播图START================================================*/
/*注册滑动事件*/
function ul_scroll(ulDom) {
	var startX = 0;
	var moveX = 0;
	var distanceX = 0;

	/*加移动限制*/
	var ulWidth = ulDom.offsetWidth;
	var bodyWidth = document.body.offsetWidth;

	// 移动的 范围
	var maxX = 0;
	var minX = bodyWidth - ulWidth;
	// 定义 移动的 偏差值
	var xDelay = 100;

	ulDom.addEventListener('touchstart', function(e) {
		moveX = 0;
		//记录起始值
		startX = e.touches[0].clientX;
		// 关闭 过渡效果
		ulDom.style.transition = 'none';
	})
	ulDom.addEventListener('touchmove', function(e) {
		//记录移动值
		moveX = e.touches[0].clientX - startX;

		// 为了保证 正好是在 范围内移动 需要对移动的距离进行修正

		if((moveX + distanceX) < (maxX + xDelay) && (moveX + distanceX) > (minX - xDelay)) {
			// 移动
			ulDom.style.transform = 'translateX(' + (moveX + distanceX) + 'px)';
		}
	})
	ulDom.addEventListener('touchend', function(e) {
		distanceX = distanceX + moveX;
		// 判断 当前的这个 distanceY 是否 超出了 范围 maxX = minX = 
		// 如果 比最大的还要大
		if(distanceX > maxX) {
			distanceX = maxX;
		} else if(distanceX < minX) {
			distanceX = minX;
		}
		if(Math.abs(moveX) > 0) {
			// 添加过渡即可
			ulDom.style.transition = 'all .5s';

			// 移动回去
			ulDom.style.transform = 'translateX(' + distanceX + 'px)';
		}
	})
}

/*更新如下：
1.解决了快速点击切换过快。现在连击切换有延迟。
2.解决了小圆点和左右按钮现在可以不要。而不会出现的bug


animate轮播图，修改ul的left值

*/
//这是函数
function imgscrool(obj) {
	var moving = false;
	var width = $(obj + " .banner .img li").width();
	var i = 0;//索引
	/*克隆第一个到li最后*/
	var clone = $(obj + " .banner .img li").first().clone();
	$(obj + " .banner .img").append(clone);
	/*添加小图标*/
	$('.banner').append('<ul class="num"></ul>');
	var size = $(obj + " .banner .img li").size();
	for(var j = 0; j < size - 1; j++) {
		$(obj + " .banner .num").append("<li></li>");
	}
	$(obj + " .banner .num li").first().addClass("on");

	/*点击圆点*/
	if($(obj + " .banner .num li")) {
		$(obj + " .banner .num li").hover(function() {
			var index = $(this).index();
			i = index;
			$(obj + " .banner .img").stop().animate({
				left: -index * width
			}, 1000)
			$(this).addClass("on").siblings().removeClass("on")
		})
	};

	/*自动轮播*/
	var t = setInterval(function() {
		i++;
		move();
	}, 2000)

	/*对banner定时器的操作*/
	/*$(obj + " .banner").hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval(function() {
			i++;
			move();
		}, 2000)
	})*/

	if($(obj + " .banner .btn_l")) {
		/*向左的按钮*/
		$(obj + " .banner .btn_l").stop(true).click(function() {
			if(moving) {
				return;
			};
			moving = true;
			i--
			move();
		})
		/*向右的按钮*/
		$(obj + " .banner .btn_r").stop(true).click(function() {
			if(moving) {
				return;
			}
			moving = true;
			i++
			move()
		})
	};

	/*图片滑动 touch事件）*/
	var imageBox = $(obj + " .banner .img").get(0);
	var startX = 0;
	var moveX = 0;
	var distanceX = 0;
	var isMove = false;

	imageBox.addEventListener('touchstart', function(e) {
		clearInterval(t);
		startX = e.touches[0].clientX;
	});
	imageBox.addEventListener('touchmove', function(e) {
		isMove = true;
		moveX = e.touches[0].clientX;
		distanceX = moveX - startX; /*distanceX  值  正负*/

		var currX = -i * width + distanceX;
		$(obj + " .banner .img").stop(true).animate({
			left: currX
		}, 1000)
	});
	/*手指向左滑动*/
	imageBox.addEventListener('touchend', function(e) {
		if(isMove && (Math.abs(distanceX) > width / 30)) {
			/*5.当超过了一定的距离的时候    滚动  到上一张 或 下一张  （一定的距离  1/20  屏幕宽度  过渡）*/
			if(distanceX > 0) {
				i--
				move();
			} else {
				i++;
				move();
			}
		} else {
			move()
		}
		/*重置*/
		startX = 0;
		moveX = 0;
		distanceX = 0;
		isMove = false;

		/*添加定时器*/
		clearInterval(t);
		t = setInterval(function() {
			i++;
			move();
		}, 2000)
	});

	function move() {
	/*====================================================(全靠它做过渡)=====================================================*/
		if(i == size) {
			$(obj + " .banner  .img").css({
				left: 0
			})
			i = 1;
		}
		// 修改轮播每屏宽度
		if(i == -1) {
			$(obj + " .banner .img").css({
				left: -(size - 1) * width
			})
			i = size - 2;
		}
	/*===================================================================================================================*/
		
		$(obj + " .banner .img").stop(true).delay(200).animate({
			left: -i * width
		}, 1000, function() {
			moving = false;
		})

		if(i == size - 1) {
			$(obj + " .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
		} else {
			$(obj + " .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
		}
	}
}

/*第二种*/
//transition轮播图，修改ul的translateX值
/*//模板
 * .num{
		position: absolute;
	    width: 100%;
	    bottom: 6px;
	    left: 0;
	    text-align: center;
	    font-size: 0px;
	}
	.banner .num li {
	    width: 10px;
	    height: 10px;
	    background: #E1E2E5;
	    border-radius: 50%;
	    display: inline-block;
	    margin: 0 3px;
	    cursor: pointer;
	}
	.banner .num li.on{
		background: #999;
	}
 * 	<div class="banner">
		<ul class="img">
			<li class="fl"><img class="fl" src="images/1.jpg" alt="" /></li>
			<li class="fl"><img class="fl" src="images/2.jpg" alt="" /></li>
		</ul>
	</div>
 * */
function banner() {
	/*克隆第一个，放到最后,克隆最后一个，放到最前头(解决左右滑动问题)*/
	var clone1 = $(".banner .img li").last().clone();
	var clone2 = $(".banner .img li").first().clone();
	$( ".banner .img").append(clone2);
	$( ".banner .img").prepend(clone1);
	
	/*添加小图标*/
	var maxLength = $(".banner .img li").size()-2; /*index的大小范围为： 0 - maxLength*/
	$('.banner').append('<ul class="num"></ul>');
	for(var j = 0; j < maxLength; j++) {
		$(".banner .num").append("<li></li>");
	}
	$(".banner .num li").first().addClass("on");
	/*获取到dom对象*/
	var banner = document.querySelector('.banner');
	var w = banner.offsetWidth;
	var imageBox = banner.querySelector('ul.img');
	
	var pointBox = document.querySelector('ul.num');
	var points = pointBox.querySelectorAll('li');
	
	/*添加过渡*/
	var addTransition = function() {
		imageBox.style.webkitTransition = "all .2s"; /*兼容*/
		imageBox.style.transition = "all .2s";
	};
	/*删除过渡*/
	var removeTransition = function() {
		imageBox.style.webkitTransition = "none"; /*兼容*/
		imageBox.style.transition = "none";
	};
	/*改变位子*/
	var setTranslateX = function(translateX) {
		imageBox.style.webkitTransform = "translateX(" + translateX + "px)";
		imageBox.style.transform = "translateX(" + translateX + "px)";
	};

	/*1.自动的滚动起来    （定时器，过渡）*/
	var   index= 1;
	setTranslateX(-index * w);
	var timer = setInterval(function() {
		/*箱子滚动*/
		index++;
		/*加过渡*/
		addTransition();
		setTranslateX(-index * w);
		/*小标ul*/
		setPoint();
	}, 3000);
	
	/*点击圆点*/
	if($(".banner .num li")) {
		$(".banner .num li").hover(function() {
			index = $(this).index()+1;
			setTranslateX(-index * w);
			$(this).addClass("on").siblings().removeClass("on")
		})
	};
	
	/*======================================绑定一个过渡结束事件(全靠它做过渡)======================================================*/
	imageBox.addEventListener('webkitTransitionEnd', function() {
		if(index >= maxLength) {
			index = 0;
			removeTransition();
			setTranslateX(-index * w);
		} else if(index <= 0) {
			index = maxLength;
			removeTransition();
			setTranslateX(-index * w);
		}
	});
	/*======================================绑定一个过渡结束事件(全靠它做过渡)======================================================*/
	/*小图标样式改变*/
	var setPoint = function() {
		/*把所有点的样式清除*/
		for(var i = 0; i < points.length; i++) {
			points[i].className = " ";
		}
		if(index > maxLength) {
			points[0].className = "on";
		} 
		else if(index <= 0) {
			points[maxLength-1].className = "on";
		}
		else {
			points[index-1].className = "on";
		}
	}

	/*3.图片滑动 touch事件）*/
	var startX = 0;
	var moveX = 0;
	var distanceX = 0;
	var isMove = false;

	imageBox.addEventListener('touchstart', function(e) {
		/*清除定时器*/
		clearInterval(timer);
		startX = e.touches[0].clientX;
	});
	imageBox.addEventListener('touchmove', function(e) {
		isMove = true;
		moveX = e.touches[0].clientX;
		distanceX = moveX - startX;
		/*将要去做定位*/
		var currX = -index * w + distanceX;
		/*删除过渡*/
		removeTransition();
		/*改变位子*/
		setTranslateX(currX);
	});
	imageBox.addEventListener('touchend', function(e) {
		/*当超过了一定的距离的时候 */
		if(isMove && (Math.abs(distanceX) > w / 30)) {
			/*5.当超过了一定的距离的时候    滚动  到上一张 或 下一张  （一定的距离  1/20  屏幕宽度  过渡）*/
			if(distanceX > 0) {
				index--; /*向右滑  上一张*/
			} else {
				index++; /*向左滑 下一张*/
			}
			addTransition();
			setTranslateX(-index * w);
			setPoint();
		}
		/*当不超过一定的滑动距离的时候*/
		else {
			/*4.当不超过一定的滑动距离的时候  吸附回去  定位回去     （一定的距离  1/3  屏幕宽度  过渡）*/
			addTransition();
			setTranslateX(-index * w);
		}
		/*重置*/
		startX = 0;
		moveX = 0;
		distanceX = 0;
		isMove = false;

		/*添加定时器*/
		clearInterval(timer);
		timer = setInterval(function() {
			index++;
			addTransition();
			setTranslateX(-index * w);
			setPoint();
		}, 3000);
	});
}
/*===============================================轮播图END=====================================================*/